<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="#{login.title}">Login - SnackMQ Console</title>
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/css/login-custom.css">
    <style>
        /* 已迁移到console-custom.css，无需保留 */
    </style>
</head>
<body class="text-center">
<div class="login-container">
    <div class="login-illustration">
        <img src="/img/login-illustration.png" alt="Login Illustration" />
    </div>
    <div class="login-form-area">
        <h1 th:text="#{login.heading}">SnackMQ Console</h1>
        <form class="login-form" th:action="@{/login}" method="post">
            <div th:if="${param.error}" class="alert alert-danger" role="alert" th:text="#{login.invalid.credentials}">
                Invalid username or password.
            </div>
            <div th:if="${param.logout}" class="alert alert-success" role="alert" th:text="#{login.logout.success}">
                You have been logged out.
            </div>
            <div class="form-floating">
                <input type="text" class="form-control" id="username" name="username" th:placeholder="#{login.username.placeholder}" required autofocus>
                <label for="username" th:text="#{common.username}">Username</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="password" name="password" th:placeholder="#{login.password.placeholder}" required>
                <label for="password" th:text="#{common.password}">Password</label>
            </div>
            <div class="form-check text-start">
                <input class="form-check-input" type="checkbox" value="remember-me" id="rememberMe" name="remember-me">
                <label class="form-check-label" for="rememberMe" th:text="#{login.remember.me}">Remember Me</label>
            </div>
            <button class="btn btn-primary w-100" type="submit" th:text="#{login.sign.in}">Sign in</button>
        </form>
    </div>
</div>
<th:block th:replace="~{fragments/js/login-js :: js}"></th:block>
</body>
</html>